<template>
  <div>
    <!-- 搜索栏区域 -->
    <div>
      <el-form
        ref="form"
        :inline="true"
        :model="formData"
        class="demo-form-inline"
      >
        <el-form-item label="关键字">
          <el-input v-model="formData.key" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区域 -->
    <div>
      <el-button type="primary" @click="dialogVisible = true"
        >新增Banner</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div>
      <el-table :data="tableData">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="Alt" prop="alt"></el-table-column>
        <el-table-column label="预览" prop="url">
          <template slot-scope="{ row }">
            <!-- <button @click="test(scope)">按钮</button> -->
            <img :src="'http://localhost:4001' + row.url" />
          </template>
        </el-table-column>
        <el-table-column label="链接" prop="link"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button @click="fun(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages"
        :page-sizes="[5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 弹出层 -->
    <el-dialog title="添加Banner" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="formbanner" class="demo-form-inline">
        <el-form-item label="图片名称">
          <el-input v-model="formbanner.name" placeholder="图片名称"></el-input>
        </el-form-item>
        <el-form-item label="图片Title">
          <el-input
            v-model="formbanner.title"
            placeholder="图片Title"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片alt">
          <el-input v-model="formbanner.alt" placeholder="图片alt"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="formbanner.link" placeholder="跳转链接"></el-input>
        </el-form-item>
        <el-form-item label="上传">
          <el-upload
            ref="upload"
            list-type="picture-card"
            :auto-upload="false"
            :multiple="false"
            :limit="1"
            action
            :http-request="uploadFile"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
            :headers="headers"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 图片预览弹窗 -->
    <el-dialog :visible.sync="imgdialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
  
  <script>
import { uploadfile_api, uploadBanner_api, getBanner_api } from "@/api/upload";
import { v4 } from "uuid";
export default {
  name: "banner",
  data() {
    return {
      headers: { "Content-Type": "multipart/form-data" },
      size: 5,
      pages: 1,
      dialogVisible: false,
      imgdialogVisible: false,
      dialogImageUrl: "",
      disabled: false,
      formData: {
        key: "张三",
      },
      fileList: [],
      formbanner: {
        id: "",
        url: "",
        name: "吃鱼抓金兔|元宵节|",
        title: "吃鱼抓金兔|元宵节|",
        alt: "吃鱼抓金兔|元宵节|",
        link: "http://www.baidu.com",
      },
      tableData: [],
    };
  },
  // 计算属性
  computed: {},
  methods: {
    test(scope) {
      console.log(scope);
    },

    // 查询
    onSubmit() {
      console.log(this.formData);
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 提交弹出层内容(确定)
    submitDialog() {
      // 先上传图片，图片上传成功之后拿到url
      // 发起请求存储数据
      this.$refs.upload.submit();
      this.dialogVisible = false;
    },
    //关闭弹出层

    // 切换页面容量
    handleSizeChange(n) {
      this.size = n;
      console.log("每页显示条数----->", n);
      //   发起请求获取数据
    },
    //切换页码
    handleCurrentChange(n) {
      this.pages = n;
      console.log("当前页码----->", n);
      //   发起请求获取数据
    },
    // 查看预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgdialogVisible = true;
    },
    // 文件上传
    uploadFile(item) {
      console.log(item);
      const fm = new FormData();
      fm.append("file", item.file);
      uploadfile_api(fm).then((res) => {
        this.$message({
          message: "文件上传成功，正在提交数据",
          type: "success",
        });

        // 构建表单数据
        let fData = { ...this.formbanner, id: v4(), url: res.info.url };
        console.log(fData);
        uploadBanner_api(fData).then((res) => {
          console.log(res);
          this.$message({
            message: "banner上传成功",
            type: "success",
          });
          //   重新请求数据
          this.getData();
        });
      });
    },
    // 获取数据
    getData() {
      getBanner_api().then((res) => {
        console.log(res);
        this.tableData = res.info;
      });
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
};
</script>
  
  <style scoped>
/* @import url(''); 引入css类 */
</style>